<template>
	<view class="mine-container">
		<!-- 顶部用户信息区域 -->
		<view class="user-header">
			<view class="bg-wrap">
				<image class="bg-image" src="/static/mine-bg.jpg" mode="aspectFill" />
				<view class="bg-mask"></view>
			</view>
			<view class="user-content">
				<view class="avatar-wrap">
					<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill" />
					<view class="vip-badge" v-if="userInfo.isVip">VIP</view>
				</view>
				<view v-if="isLogin" class="info">
					<view class="nickname">{{ userInfo.nickname || '未设置昵称' }}</view>
					<view class="signature">{{ userInfo.signature || '这个人很懒，什么都没留下' }}</view>
				</view>
				<view v-else class="login-btn" @tap="goToLogin">登录 / 注册</view>
			</view>
		</view>

		

		<!-- 功能菜单列表 -->
		<view class="menu-section">
			<view class="menu-group" v-for="(group, groupIndex) in menuGroups" :key="groupIndex">
				<view class="menu-item" v-for="(item, index) in group" :key="index" @tap="handleMenu(item)">
				
			
					<view class="menu-left">
						<text class="iconfont" :class="item.icon"></text>
						<text class="text">{{ item.text }}</text>
					</view>
					<view class="menu-right">
						<text class="desc" v-if="item.desc">{{ item.desc }}</text>
						<text class="iconfont icon-arrow"></text>
					</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {},
				statsData: [
				],
				menuGroups: [
					
					[	{
							icon: 'icon-edit',
							text: '个人信息',
							path: '/pages/mine/userInfo'
						},
						{
							icon: 'icon-order',
							text: '我的订单',
							path: '/pages/order/order'
						},
						{
							icon: 'icon-edit',
							text: '我的发布',
							path: '/pages/forum/my-posts'
						},

					],
					[{
						icon: 'icon-course',
						text: '课程管理',
						path: '/pages/admin/course/list',
						needLogin: true,
						isAdmin: true
					}],
					[{
						icon: 'icon-course',
						text: '用户管理',
						path: '/pages/mine/user-manage',
						needLogin: true,
						isAdmin: true
					}],
					[{
						icon: 'icon-course',
						text: '轮播图管理',
						path: '/pages/admin/banner/manage',
						needLogin: true,
						isAdmin: true
					}],
					[{
						icon: 'icon-course',
						text: '帖子管理',
						path: '/pages/admin/post/manage',
						needLogin: true,
						isAdmin: true
					}],
					[{
						icon: 'icon-course',
						text: '退出登录',
						path: '',
						// needLogin: true,
						//  isAdmin: true
					}]
				]
			}
		},
		onShow() {
			this.checkLoginStatus()
		},
		methods: {
			checkLoginStatus() {
				const userInfo = uni.getStorageSync('userInfo')
				this.isLogin = !!userInfo
				this.userInfo = userInfo
			},
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			handleMenu(item) {
				console.log(item)
				if (item.text == '退出登录') {
					uni.clearStorageSync();
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}

				if (!this.isLogin && item.needLogin !== false) {
					return this.goToLogin()
				}
				if (item.isAdmin && !this.userInfo.isAdmin) {
					uni.showToast({
						title: '无权限访问',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: item.path
				})
			},
			handleStat(item) {
				if (!this.isLogin) {
					return this.goToLogin()
				}
				uni.navigateTo({
					url: `/pages/${item.type}/list`
				})
			},
			goToMyOrders() {
				if (!this.isLogin) {
					this.goToLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/order/list'
				})
			},
			goToMyPosts() {
				if (!this.isLogin) {
					this.goToLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/forum/my-posts'
				})
			},
			goToSettings() {
				if (!this.isLogin) {
					this.goToLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/mine/settings'
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('userInfo')
							this.isLogin = false
							this.userInfo = null
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							})
						}
					}
				})
			}
		},
		
	
	
		
	}
</script>

<style lang="scss" scoped>
	.mine-container {
		min-height: 100vh;
		background-color: #f6f7fb;

		.user-header {
			position: relative;
			height: 340rpx;
			overflow: hidden;

			.bg-wrap {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;

				.bg-image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.bg-mask {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%);
				}
			}

			.user-content {
				position: relative;
				z-index: 1;
				padding: 60rpx 40rpx;
				display: flex;
				align-items: center;

				.avatar-wrap {
					position: relative;

					.avatar {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
						border: 6rpx solid rgba(255, 255, 255, 0.8);
					}

					.vip-badge {
						position: absolute;
						right: -6rpx;
						bottom: 6rpx;
						background: linear-gradient(135deg, #FFD700, #FFA500);
						color: #fff;
						font-size: 20rpx;
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
						border: 2rpx solid #fff;
					}
				}

				.info {
					margin-left: 30rpx;
					color: #fff;

					.nickname {
						font-size: 40rpx;
						font-weight: 600;
						margin-bottom: 12rpx;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
					}

					.signature {
						font-size: 26rpx;
						opacity: 0.9;
					}
				}

				.login-btn {
					margin-left: 30rpx;
					padding: 16rpx 40rpx;
					background: rgba(255, 255, 255, 0.9);
					border-radius: 40rpx;
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}

		.user-stats {
			margin: -60rpx 30rpx 0;
			padding: 30rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
			display: flex;
			position: relative;
			z-index: 2;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

			.stat-item {
				flex: 1;
				text-align: center;
				position: relative;

				&:not(:last-child)::after {
					content: '';
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					height: 50%;
					width: 2rpx;
					background-color: #eee;
				}

				.number {
					display: block;
					font-size: 36rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 8rpx;
				}

				.label {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.menu-section {
			margin: 30rpx;

			.menu-group {
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				overflow: hidden;

				.menu-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx;
					position: relative;

					&:not(:last-child)::after {
						content: '';
						position: absolute;
						left: 30rpx;
						right: 30rpx;
						bottom: 0;
						height: 2rpx;
						background-color: #f5f5f5;
					}

					.menu-left {
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 40rpx;
							margin-right: 20rpx;
							color: #4a6ee0;
						}

						.text {
							font-size: 28rpx;
							color: #333;
						}
					}

					.menu-right {
						display: flex;
						align-items: center;

						.desc {
							font-size: 26rpx;
							color: #999;
							margin-right: 10rpx;
						}

						.icon-arrow {
							font-size: 28rpx;
							color: #ccc;
						}
					}
				}
			}
		}

		.function-list {
			background-color: #fff;
			border-radius: 20rpx;
			margin: 20rpx;
			padding: 0 30rpx;
		}

		.function-item {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.function-item:last-child {
			border-bottom: none;
		}

		.function-item .iconfont {
			font-size: 40rpx;
			color: #4a6ee0;
			margin-right: 20rpx;
		}

		.function-item .title {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.function-item .icon-right {
			font-size: 32rpx;
			color: #999;
		}
	}
</style>